<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>按地区设置规则</title>
		<script src="<s:url value='/js/jquery/jquery-1.5.1.min.js'/>"></script>
		<script src="<s:url value='/js/jquery/jquery.switchable.min.js'/>"></script>
		<script
			src="<s:url value='/js/jquery/jquery-ui-1.8.11.custom.min.js'/>"></script>
		<script src="<s:url value='/js/jquery/jquery.ui.spinner.min.js'/>"></script>
		<script
			src="<s:url value='/js/jquery/jquery.ui.datepicker-zh-CN.js'/>"></script>
		<script src="<s:url value='/js/jqgrid/grid.locale-cn.js'/>"></script>
		<script src="<s:url value='/js/jqgrid/jquery.jqGrid.min.js'/>"></script>
		<script src="<s:url value='/js/backstage.js'/>"></script>
		<script src="<s:url value='/js/step1.js'/>"></script>
		<script src="<s:url value='/js/step2.js'/>"></script>
		<script src="<s:url value='/js/step3.js'/>"></script>
		<script src="<s:url value='/js/step4.js'/>"></script>
		<script src="<s:url value='/js/prototype.js'/>"></script>
		<script src="<s:url value='/js/jquery/jquery-ui-timepicker-addon-0.5.min.js'/>"></script>
		<link
			href="<s:url value='/css/jquery-ui/jquery-ui-timepicer.css'/>"
			rel="stylesheet" type="text/css" />
		<link
			href="<s:url value='/css/jquery-ui/jquery-ui-1.8.11.custom.css'/>"
			rel="stylesheet" type="text/css" />
			
		<link href="<s:url value='/css/backstage.css'/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value='/css/button/button.css'/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value='/css/jqgrid/ui.jqgrid.css'/>"
			rel="stylesheet" type="text/css" />

		<script type="text/javascript">
	<!--
		$(function() {
			$( "#tabs" ).tabs({
				selected:0,
				select: function(event, ui) {
					switch(ui.panel.id) {
						case "tab1" : return true;
						case "tab2" : 
							if(validate_area()== false) {
								$(this).tabs("select", 0);
								return false;
							}
							return true;
						case "tab3" : 
							if(validate_area()== false) {
								$(this).tabs("select", 0);
								return false;
							}
							if(!validate_tab2()) {
								$(this).tabs("select", 1);
								return false;
							}
							return true;
						case "tab4" : 
							if(validate_area()== false) {
								$(this).tabs("select", 0);
								return false;
							}
							if(!validate_tab2()) {
								$(this).tabs("select", 1);
								return false;
							}
							if(!validate_tab3()) {
								$(this).tabs("select", 2);
								return false;
							}
							return true;
						default : break;
					}
					return false;
				}
			});
			
			$("#choosed_item_container").sortable();
			load_gridtable_area("TF_M_USER_RULE_AREA");
			
			$(".effect_date").datetimepicker({
				timeFormat: 'hh:mm:ss',
		        stepHour: 1,
		        stepSecond: 5,
		        stepMinute: 5,
		        dateFormat:"yy-mm-dd", 
		        showHour: true,
		        showMinute: true,
		        showSecond: true
		    });
		    
		    $('#preview_div').dialog({
		        autoOpen: false,
		        resizable: false,
		        modal: true,
		        width: 800,
		        title: "预览效果",
		        buttons: {
					"确 定": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			
			$('#confirm_div').dialog({
		        autoOpen: false,
		        resizable: false,
		        modal: true,
		        width: 400,
		        title: "是否需要设置当前主规则立即生效",
		        buttons: [
		        	{
						text: "保存并立即生效",
						click: function() {
							persist(1);
							$(this).dialog("close");
						}
					},
					{
						text:"只保存当前规则",
						click : function() {
							persist(0);
							$(this).dialog("close");
						}
					}
				]
			});
		        
		   $('#area_selector').click(function(){
		      	$('#prompt_div').dialog('open');
		      	return false;
		   });
		});
		
	//-->
	</script>
	</head>

	<body>
		<input type="hidden" id="menu_id" value="nav_setting_area" />
		<div id="tabs">
			<ul>
				<li>
					<a href="#tab1" class="tab1">第一步：选择城市</a>
				</li>
				<li>
					<a href="#tab2" class="tab2">第二步：选择宝贝</a>
				</li>
				<li>
					<a href="#tab3" class="tab3">第三步：选择模板</a>
				</li>
				<li>
					<a href="#tab4" class="tab4">第四步：保存</a>
				</li>
			</ul>
			<div id="tab1"><%@ include file="./area_selector.jsp"%></div>
			<div id="tab2"><%@ include file="../item_selector.jsp"%></div>
			<div id="tab3"><%@ include file="../template_selector.jsp"%></div>
			<div id="tab4"><%@ include file="../save.jsp"%></div>
		</div>
	</body>
</html>
